<template>
  <div class="nav">
    <div class="wrapper">
      <ul
        v-for="(item,index) in navTitle"
        :key="item.id"
        class="item"
        @mouseover="item.show = true"
        @mouseout="item.show = false"
      >
        <!-- :class="[{listSelect:(selectitem === item.id),}]" -->
        <div
          :class="[{ listSelect: selectitem === item.id }]"
          @mouseover="select(item.id)"
          @click="go(item.id, item.id, index, item.title)"
        >
          <span>{{ item.title }}</span>
        </div>
        <transition name="fade">
          <ul v-show="item.show">
            <li v-for="(child, index) in item.childs" :key="index">
              <div
                @click="
                  go(child.id, child.parentId, index, child.title, item.title),
                    (item.show = false)
                "
              >
                {{ child.title }}
              </div>
            </li>
          </ul>
        </transition>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,

      selectitem: "",
    };
  },

  methods: {
    go(id, parentId, index, name, parentName) {
      this.selectitem = parentId;
      this.$router.push({
        path:'/category',
        query:{
          id,
          parentId,
        }
      })
    },

    select(id, parentId) {
      this.selectitem = id ? id : parentId;
    },
  },
  props: {
    navTitle: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/main.scss";
.nav {
  background-color: #ffffff;
  border-top: 1px solid #eee;
  box-shadow: 0 3px 3px #c0c0c0;
  height: 50px;
}
.wrapper {
  height: 50px;
  display: flex;
  .item {
    height: 50px;
    display: block;
    text-align: center;
    line-height: 22px;
    position: relative;
    background-color: #ffffff;
    flex: 1;
    cursor: pointer;
    div {
      display: block;
      height: 100%;
      box-sizing: border-box;
      padding: 14px 0;
      span {
        display: block;
        height: 20px;
        border-right: 1px solid #eee;
      }
    }
    ul {
      li {
        height: 50px;
        display: block;
        text-align: center;
        line-height: 22px;
        position: relative;
        background-color: #ffffff;
        transition: color 1s;
        border-bottom: 1px solid #eee;
      }
    }
  }
  // .item:hover > div {
  //   color: #ffcf46;
  // }
  // .item:hover {
  //   background-color: $--theme-primary;
  // }
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.listSelect {
  background-color: $--theme-primary;
  color: #ffcf46;
}
</style>